import React from 'react';
import { Dropdown, Button } from 'antd';
import { GlobalOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { languages } from '@/i18n';

const LanguageSwitch: React.FC = () => {
  const { i18n } = useTranslation();

  const items = languages.map(lang => ({
    key: lang.code,
    label: lang.name,
  }));

  const handleMenuClick = ({ key }: { key: string }) => {
    i18n.changeLanguage(key);
  };

  return (
    <Dropdown
      menu={{
        items,
        onClick: handleMenuClick,
        selectedKeys: [i18n.language],
      }}
      placement="bottomRight"
    >
      <Button
        type="text"
        icon={<GlobalOutlined />}
        style={{ color: 'inherit' }}
      />
    </Dropdown>
  );
};

export default LanguageSwitch; 